<template>
	<view class="px-5 mt-5">
		<!-- 头像部分 -->
		<view class="rowSta">
			<view class="text-vip position-relative" style="width: 80rpx;height: 80rpx;">
				<image class="radius-100" style="width: 80rpx;height: 80rpx;" :src="item.avatar" mode="aspectFill"></image>
			</view>
			<text class="ml-2 font-weight-600 mt-1">{{item.nickname}}</text>
			<text class=""></text>
		</view>
		<!-- 标题部分 -->
		<view class="text-dark mt-3">
			{{item.title}}
		</view>
		<!-- 内容部分 -->
		<view class="text-grey text-ellipsis-3 line-height-50 my-2">
			{{item.content}}
		</view>
		<!-- 话题部分 -->
		<view class="rowCenCen radius-100 inline-flex mb-2" style="background-color: #f8f5f8;">
			<view class="text-white rowCenCen radius-100" style="background-color: #afd7ff;width: 40rpx;height: 40rpx;margin-right: 5rpx;">#</view>
			<text class="font-20" style="color: #69abed;">{{item.theme}}</text>
		</view>
		<!-- 图片部分 -->
		<view class="position-relative" style="width: 650rpx;height: 650rpx;">
			<image class="position-absolute left-0 top-0" :src="item.images.list[0]" style="width: 321rpx;height: 321rpx;" mode="aspectFill"></image>
			<image class="position-absolute right-0 top-0" :src="item.images.list[1]" style="width: 321rpx;height: 321rpx;" mode="aspectFill"></image>
			<image class="position-absolute left-0 bottom-0" :src="item.images.list[2]" style="width: 321rpx;height: 321rpx;" mode="aspectFill"></image>
			<image class="position-absolute right-0 bottom-0" :src="item.images.list[3]" style="width: 321rpx;height: 321rpx;" mode="aspectFill"></image>
		</view>
		<!-- 评论部分 -->
		<view class="bg-light-grey px-3 pt-3" style="height: 190rpx;margin-top: 45rpx;">
			<!-- 头像 -->
			<view class="rowCenSta">
				<image class="radius-100 mr-15" :src="item.comment.avatar" style="width: 60rpx;height: 60rpx;" mode="aspectFill"></image>
				<!-- nickName -->
				<text class="text-grey">{{item.comment.nickname}}：</text>
			</view>
			<!-- 评论 -->
			<view class="mt-3 text-dark">{{item.comment.comment}}</view>
		</view>
		<!-- 时间部分 -->
		<view class="rowCenSta mt-3" style="margin-bottom: 100rpx;">
			<text class="text-grey">{{item.comment.time}}</text>
			<text class="text-grey ml-auto" style="margin-right: 75rpx;">{{item.comment.commentNum}}</text>
			<text class="text-grey">{{item.comment.supportNum}}</text>
		</view>
		<!-- 分割线 -->
		<base-divide-line></base-divide-line>
	</view>
</template>

<script setup lang="ts">
	defineProps({
		item:{
			type:Object,
			required:true
		}
		
	})
</script>

<style>

</style>
